/*
 * Copyright © 2016-2017 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import "../../../bower_components/bootstrap/less/mixins.less";
@import '../../styles/themes/cdap/mixins.less';

@border-color: #cccccc;
@headerbar-background-color: #525252;
@headerbar-stat-color: #000000;
@headerbar-stat-name-color: #ffffff;
@headerbar-font-size: 12px;
@table-background-color: white;
@stack-trace-background-color: lighten(black, 35%);
@stack-trace-font-color: #cccccc;
@message-expanded-color: #dedede;
@searchbar-placeholder-color: #787878;
@searchbar-input-color: #9cbcfc;
@timeline-buffer-color: #a6a6a6;
@error-color: #ff1744;
@warning-color: #ffa726;
@selected-row-color: #e4e4e4;
@application-primary-color: #43b82f;
@application-secondary-color: #d15668;
@application-completed-color: #5a84e4;
@application-default-color: #969696;

body.theme-cdap {
  .modal.hydrator-modal {
    &.node-config-modal.raw-modal {
      .modal-dialog.raw-modal-modal {
        margin-top: 120px;
        &.expand {
          margin-bottom: 0;
          height: ~"calc(100vh - 120px)";
          height: ~"-moz-calc(100vh - 120px)";
          height: ~"-webkit-calc(100vh - 120px)";
        }
      }
    }
  }
}

.modal.hydrator-modal {
  &.node-config-modal,
  &.raw-modal {
    .modal-dialog.raw-modal-dialog {
      margin-left: auto;
      margin-right: auto;
    }
  }
}

.logs-raw-modal {
  .modal-title {
    padding-top: 16px;
  }

  pre {
    max-height: ~"-moz-calc(100vh - 190px)";
    max-height: ~"-webkit-calc(100vh - 190px)";
    max-height: ~"calc(100vh - 190px)";
  }
}

body {

  main.container > div {
    margin-bottom: 0;
  }
}

my-log-viewer,
my-log-viewer-preview {
  font-family: Helvetica, Arial, sans-serif;

  .empty-buffer {
    display: none;
  }

  .row-expanded {
    td,
    span {
      white-space: pre-wrap;
    }

    td.source {
      white-space: normal;
      word-break: break-all;
      text-overflow: inherit;
    }
  }

  .dropdown-menu {
    min-width: 80px;
  }

  .log-viewer-container.full-screen {
    position: absolute;
    left: 0;
    right: 0;
    top: 50px;
    z-index: 1000;

    .log-stats {
      position: relative;
      bottom: 9px;
    }

    .empty-buffer {
      display: block;
      position: absolute;
      top: 100px;
      bottom: 0;
      left: 0;
      right: 0;
      overflow: none;
      background-color: white;
      z-index: -50;
    }

    .logs-table {
      height: ~"-moz-calc(100vh - 166px)";
      height: ~"-webkit-calc(100vh - 166px)";
      height: ~"calc(100vh - 166px)";
    }
  }

  .highlighted-text {
    background: #9cd0fc;
    border-radius: 5px;
    color: #000000;
  }

  .log-viewer-container {

    .source-tooltip {
      overflow: visible;
    }

    .stat-count-number {
      padding-left: 5px;
      padding-right: 5px;
    }

    .log-stats-container {
      padding-top: 4px;
    }

    .slider .background {
      cursor: pointer;
    }

    .fill-bar {
      background-color: green;
    }

    .domain {
      fill: none;
      stroke: none;
      display: none;
    }

    .axis {
      shape-rendering: crispEdges;
    }

    .slider .domain {
      fill: none;
      stroke: #000000;
      stroke-opacity: 0.3;
      height: 30px;
      stroke-width: 10px;
      stroke-linecap: round;
    }

    .xaxis-top {
      stroke: none;
      fill: none;
    }

    .xaxis-bottom {
      stroke: white;
      fill: white;
      stroke-width: 0.2;
      shape-rendering: crispEdges;
    }

    .xaxis-bottom line {
      stroke-width: 0.6;
      shape-rendering: crispEdges;
    }

    .logs-headerbar {
      background-color: @headerbar-background-color;
      height: 50px;
      .flexbox();
      .flex-wrap(@wrap: wrap);
      .justify-content(@justify: space-between);
      .align-items(@align: center);

      .logs-status-container {
        display: inline-block;
        height: 100%;
        margin-left: 11px;
        font-weight: bold;
        margin-right: 105px;

        .application-name {
          display: block;
          color: white;
          font-size: 14px;
        }

        .application-status {

          &.program-primary {
            .status-circle.program-primary-circle {
              background-color: @application-primary-color;
            }
            color: @application-primary-color;
          }

          &.program-secondary {
            .status-circle.program-secondary-circle {
              background-color: @application-secondary-color;
            }
            color: @application-secondary-color;
          }

          &.program-completed {
            .status-circle.program-completed-circle {
              background-color: @application-completed-color;
            }
            color: @application-completed-color;
          }

          &.program-default {
            .status-circle.program-default-circle {
              background-color: @application-default-color;
            }
            color: @application-default-color;
          }

          .status-circle {
            display: inline-block;
            border-radius: 50%;
            width: 8px;
            height: 8px;
            margin-right: 1px;
            background-color: grey;
          }

          display: block;
          color: grey;
          font-size: 10px;
        }
      }

      .log-stats-container {
        background-color: @headerbar-background-color;
        margin: 0;
        div {
          display: inline-block;
          font-weight: normal;
        }
        .log-stats-total {
          margin-bottom: 4px;
          margin-left: 9px;
        }
        .log-stats-errors,
        .log-stats-warnings {
          cursor: pointer;
        }
        .log-stats {
          font-size: @headerbar-font-size;
          margin-right: 15px;
        }
        .stat-name {
          color: @headerbar-stat-name-color;
          margin-left: 10px;
          margin-right: 4px;
        }
        .stat-count {
          font-weight: 900;
          border-radius: 10px;
          color: @headerbar-stat-color;
          font-size: @headerbar-font-size;
        }
        .total-num { background-color: @headerbar-stat-name-color; }
        .errors-num { background-color: @error-color; }
        .warnings-num { background-color: @warning-color; }
      }

      .log-actions {
        margin: 0;

        .log-action-btn {
          height: 28px;
          border: solid 1px #acacac;
          color: white;
          background-color: transparent;
          border-radius: 4px;
          margin-right: 3px;
          outline: grey;
        }
        .include-system {
          color: white;
          margin-right: 15px;
          cursor: pointer;
        }
        .view-raw {
          max-width: 110px;
          text-decoration: none;
          line-height: 13px;
        }
        .download-all {
          max-width: 130px;
          text-decoration: none;
          line-height: 13px;
        }
        .search {
          display: inline-block;
          position: relative;
          margin-left: 6px;
        }
        .search .fa-search {
          position: absolute;
          top: 6px;
          right: 8px;
          color: #6f6868;
        }
        .log-searchbar {
          height: 28px;
          max-width: 140px;
          padding-right: 20px;
          border: none;
          border-radius: 5px;
          outline: none;
          color: @searchbar-input-color;
          font-weight: bold;
          text-indent: 5px;
          .placeholder(@color: @searchbar-placeholder-color);
          &:focus { color: @searchbar-input-color; }
        }
        .fa-expand {
          color: white;
          padding-left: 10px;
          margin-right: 10px;
          margin-left: 4px;
          cursor: pointer;
          line-height: 25px;
        }
      }
      .log-action-container {
        .flexbox();
        .flex-wrap(@wrap: wrap);
        .justify-content(@justify: flex-end);
        .align-items(@align: center);
        .align-content(@align: center);
        margin-right: 10px;
      }
    }

    .logs-timeline {
      height: 60px;
      width: 100%;
      background-color: black;

      .timeline-buffer {
        width: 100%;
        height: 10px;
        background-color: @timeline-buffer-color;
      }
    }

    table.scroll th {
      border-bottom: none;
    }

    table.scroll thead { border-bottom: 1px solid #cccccc; }

    .logs-table {
      height: ~"-moz-calc(100vh - 356px)";
      height: ~"-webkit-calc(100vh - 356px)";
      height: ~"calc(100vh - 356px)";
      font-weight: 300;

      .logs-table-body {
        overflow-y: auto;
        overflow-x: hidden;
        height: ~"-moz-calc(100% - 47px)";
        height: ~"-webkit-calc(100% - 47px)";
        height: ~"calc(100% - 47px)";
        background-color: @selected-row-color;

        .table { border-top: 0; }

        td {
          color: #333333;
          font-size: 14px;
          text-overflow: ellipsis;
          white-space: nowrap;
          .display-level {
            font-size: 12px;
            font-weight: 400;
          }
          .warning { color: @warning-color; }
          .error { color: @error-color; }
        }
      }

      .has-stack-trace {
        cursor: pointer;
      }

      .indicator-arrow {
        position: relative;
        left: 0;
        height: 100%;
        width: 10px;
      }

      tr {
        width: 100%;
        background-color: @table-background-color;

        &.display-time {
          position: relative;
          top: 0;
        }

        &.level {
          position: relative;
          top: 0;
        }

        &.row-expanded {
          background-color: @selected-row-color;
        }

        &.row-selected {
          white-space: normal;
          background-color: @selected-row-color;

          td,
          span {
            white-space: normal;
            border-bottom: none;

            .source {
              word-break: break-all;
              text-overflow: inherit;
            }
          }
        }

        &.well i {
          font-size: 12px;
        }

        td {
          line-height: 30px;
          border-top: 0;
          color: #666666;
          font-size: 11px;
          text-overflow: ellipsis;
          white-space: nowrap;
          border-left: 0;
          border-right: 0;

          .fa-chevron-right {
            color: #393939;
            position: relative;
            font-size: 8px;
            bottom: 1px;
            margin-left: 4px;
            margin-right: 2px;
          }
          .fa-chevron-down {
            color: #393939;
            font-size: 8px;
            bottom: 1px;
            margin-left: 4px;
            margin-right: 0;
          }
        }

        .log-message {
          width: 100%;
          padding-right: 5px;
        }
      }

      .stack-trace {
        border-top: none;
        height: 100%;
        width: 100%;
        background-color: @selected-row-color;
        white-space: normal;
        padding-left: 0;
        padding-right: 0;
        cursor: text;
        pre {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
          border-bottom-left-radius: 0;
          margin-left: 15px;
          margin-right: 0;
          margin-top: 5px;
          margin-bottom: 0;
          padding-left: 5px;
          padding-right: 0;
          padding-top: 10px;
          font-size: 14px;
          font-family: inherit;
          background-color: @stack-trace-background-color;
          color: @stack-trace-font-color;
          border: none;
        }
      }

      th {
        line-height: 25px;
        border-color: @border-color;
        color: #333333;
      }

      tbody tr:hover {
        background-color: @selected-row-color;
      }
      tr.message-holder {
        background-color: @table-background-color;

        &:hover {
          background-color: transparent;
        }
        td {
          padding-left: 0;
          .well.well-sm {
            margin: 5px;
            padding: 5px;
            &.spinner-container {
              margin: 0;
              padding: 0;
              border-radius: 0;
            }
          }
        }
      }
      td {
        padding: 0;
        padding-left: 10px;
        vertical-align: middle;
        line-height: 12px;
        height: 10px;
        overflow: hidden;
        font-size: 14px;
        border-color: @border-color;
      }
      td.time-stack-trace {
        padding-left: 0;
      }
      .table {
        &.table-bordered {
          border-color: @border-color;
          margin-bottom: 0;
          table-layout: fixed;
        }
        margin-top: 0;
        background-color: @table-background-color;
        font-size: 12px;
        border: 1px solid @border-color;

        th,
        th:hover,
        th:focus {
          cursor: default;
          font-size: 14px;
          border-left: 0;
          border-right: 0;

          ul.dropdown-menu { width: 30px; }

          li {
            input { margin: 5px 5px 5px 8px; }
          }
        }
        td {
          line-height: 30px;
        }
        .table-text-content {
          display: inline-block;
          height: 20px;
          padding-top: 3px;
          overflow: hidden;
        }
        .table-text-content-message {
          cursor: pointer;
          display: inline-block;
          height: 20px;
          width: calc(~'100% - 40px');
          padding-top: 3px;
          overflow: hidden;
          position: relative;
          top: 1px;
        }
      }

      tbody {
        background-color: @selected-row-color;
        .message {
          padding-left: 10px;
        }
      }

      .highlighted {
        background: blue;
      }

      .log-header {
        font-size: 14px;
      }

      .time {
        width: 150px;
        max-width: initial;
        padding-left: 15px;
      }
      .time.log-header {
        padding-left: 15px;
      }
      .time div {
        padding-left: 10px;
      }

      .level ul {
        padding: 0;
        margin: 0;
      }

      .level,
      .level-header {
        padding-right: 10px;
        padding-left: 15px;
        width: 80px;
        max-width: initial;

        .dropdown-menu {
          min-width: 88px;
          margin-left: 42px;
          padding-top: 4px;
          padding-left: 2px;
          padding-bottom: 5px;
        }
      }

      .source,
      .source-header {
        width: 320px;
      }

      .source {
        height: 20px;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding-right: 5px;
      }

      .message-header {
        width: 100%;

        .fa {
          position: relative;
          bottom: 1px;
        }

        .fa-arrow-left,
        .fa-arrow-right {
          color: #525252;
        }
        .btn.btn-default {
          background-color: #999999;
          color: #ffffff;
          border-radius: 4px;
          padding: 2px 5px;
          border: 0;
        }
      }

      .message.contains-stack-trace {
        cursor: pointer;
      }
      .message {
        width: 100%;
        max-width: 50%;
        clear: both;
        padding-left: 15px;

        .message-main {
          height: 20px;
          width: 100%;
          max-width: 0;
        }

        .message-text {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 80%;
          max-width: 500px;

          .no-stack-trace {
            padding-left: 17px;
          }

          .expand-stack-trace {
            position: relative;
            top: 1px;
            left: 3px;
          }
        }

        .fa {
          font-size: 12px;
          color: darken(@border-color, 15%);
          margin-right: 5px;
          cursor: pointer;
        }

        .icon-column {
          cursor: pointer;
          width: 24px;
          height: 30px;
          position: relative;
          top: -8px;
          display: inline-block;
          background-color: #cccccc;
          cursor: pointer;
          border-right: solid 1px @border-color;
        }

        .icon-column .fa {
          color: #7f7f7f;
          position: relative;
          left: 7px;
          top: 10px;
        }

        .message-column {
          padding-left: 5px;
        }
      }
    }
  }
}
